import { createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router'
import pinia from '@/stores'

import permissionDirective from '@/directives/permission';
import { permit } from '@/utils/permit';

// 引入全局CSS样式
import './index.css'
// 引入Bootstrap CSS（旧版布局使用，可选）
import 'bootstrap/dist/css/bootstrap.min.css'
// 引入Bootstrap Icons CSS（旧版布局使用，可选）
import 'bootstrap-icons/font/bootstrap-icons.css'
// 引入Bootstrap JS（旧版布局使用，可选）
import 'bootstrap/dist/js/bootstrap.bundle.min.js'

// 引入Element Plus（管理后台使用）
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入Element Plus图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

// 使用路由
app.use(router)

app.use(permissionDirective);

// 把 $permit 挂到全局
app.config.globalProperties.$permit = permit;
// 使用状态管理
app.use(pinia)

// 使用Element Plus
app.use(ElementPlus)

// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.mount('#app')